<template>
  <div>
      <el-table
        :data="records"
        border
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80">
        </el-table-column>
        <el-table-column
          prop="skuName"
          label="名称" >
        </el-table-column>
        <el-table-column
          prop="skuDesc"
          label="描述" >
        </el-table-column>
        <el-table-column
          label="默认图片"
          width="120" >
          <template slot-scope="{row,$index}">
            <img :src="row.skuDefaultImg" style="width:100px;height:100px"></img>
          </template>
        </el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          width="80" >
        </el-table-column>
          <el-table-column
          prop="price"
          label="价格"
          width="80">
        </el-table-column>
        <el-table-column
          prop="prop"
          width="width"
          label="操作" >
          <template slot-scope="{row,$index}">
            <el-button type="warning" size="mini" icon="el-icon-sort-up" v-if="row.isSale==0" @click="OnSale(row)"></el-button>
            <el-button type="warning" size="mini" icon="el-icon-sort-down" v-else @click="Cancel(row)"></el-button>
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit"></el-button>
            <el-button type="info" size="mini" icon="el-icon-info" @click="ShowDrawer(row)"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:center"
        @size-change="handleSizeChange"
        @current-change="getSkuList"
        :current-page="page"
        :page-sizes="[3,6,10]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->, sizes,total"
        :total="total">
      </el-pagination>
      <el-drawer
        direction="rtl"
        size="50%"
        :show-close=false
        :visible.sync="Show"> 
        <el-row :gutter="20">
        <el-col :span="6" style="text-align:right;font-weight:bold;">名称</el-col>
        <el-col :span="12">{{skuInfo.skuName}}</el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="6" style="text-align:right;font-weight:bold;">描述</el-col>
        <el-col :span="12">{{skuInfo.skuDesc}}</el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="6" style="text-align:right;font-weight:bold;">价格</el-col>
        <el-col :span="12">{{skuInfo.price}}</el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="6" style="text-align:right;font-weight:bold;">平台属性</el-col>
        <el-col :span="12">   
          <template>
            <el-tag type="success" v-for="attr in skuInfo.skuAttrValueList" :key="attr.Id">{{attr.attrId}}{{attr.attrName}}</el-tag>
          </template>
        </el-col>
        </el-row>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="6" style="text-align:right;font-weight:bold;">商品图片</el-col>
        <el-col :span="12">
          <el-carousel>
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt="" style="width:356px">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        </el-row>
      </el-drawer>
  </div>
</template>

<script>
export default {
  name:"Sku",
  props: {

  },
  components: {

  },
  data() {
	return {
    // 当前页数
    page:1,
    // 最大展示数目
    limit:10,
    // Sku列表数据
    records:[],
    // Sku列表总数
    total:0,
    // sku详情页数据
    skuInfo:{},
    // 展示抽屉
    Show:false
	};
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    // 获得Sku列表
    async getSkuList(pages=1){
      let {page,limit}=this
      page=pages
      let result=await this.$API.sku.reqAllSkuList(page,limit)
      console.log(result);
      
      if(result.code==200){
        this.total=result.data.total
        this.records=result.data.records
      }      
    },
    // 每页展示数码改变时触发
    handleSizeChange(limit){
      this.limit=limit
      this.getSkuList()
    },
    // 上架功能
    async OnSale(row){
      const result=await this.$API.sku.reqOnSale(row.id)
      if(result.code==200){
        row.isSale=1
        this.$message({
          type:"success",
          message:"上架成功"
        })
      }
    },
    // 下架功能
    async Cancel(row){
      const result=await this.$API.sku.reqCancelSale(row.id)
      if(result.code==200){
        row.isSale=0;
        this.$message({
          type:"success",
          message:"下架成功"
        })
      }
    },
    // 编辑按钮回调
    edit(){
      this.$message({
        type:"info",
        message:"正在开发中"
      })
    },
    // 详情页展示功能
    async ShowDrawer(sku){
      this.Show=true
      const res=await this.$API.sku.reqSkuById(sku.id)
      console.log(res);
      if(res.code==200){
        this.skuInfo=res.data
      }
    }
  },
};
</script>
<style>
  .el-carousel__item img {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }

</style>
<style scoped>
 .el-col {
    margin:10px 10px;
  }
  >>>.el-carousel__button{
    width:10px;
    height:10px;
    background: white;
    border-radius:50%;
  }
</style>
